<template>
  <el-menu-item
    v-if="!item.children"
    :index="item.path"
    @click="clickTroops(item)"
    style="display: flex"
  >
    <div>
    
      {{ item.meta.name }}
    </div>
    
  </el-menu-item>

  <el-sub-menu v-else :index="item.path">
    <template #title>
      <i class="iconfont icon-24gf-folderOpen"></i>
      {{ item.meta.name }}
    </template>

    <!-- 组件自调 -->
    <!-- :index="item.path+'/'+ele.path" -->
    <s-menu
      v-for="ele in item.children"
      @click="goPath(ele.name)"
      :key="ele"
      :item="ele"
      @clickTroops="clickTroops"
    />
  </el-sub-menu>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
let emigFun = defineEmits(["clickTroops"]);
defineOptions({
  name: "SMenu", //组件命名
});
defineProps(["item"]); //父组件向子组件传递的数据
const clickTroops = (item) => {
  emigFun("clickTroops", item);
};
const goPath = (name) => {
  router.push({ name: name });
};
</script>
<style scoped>
.icon {
  width: 20px;
  height: 20px;
}

</style>
